<template>
  <div class="basic_wrap">
    <div class="newTitle">
      <div class="backIcon"  @click="$router.back()">
        <img src="@/assets/img/leftGray.png">
      </div>
      <div class="title">充值</div>
      <div class="newRight" @click="$router.push('/recharge/record')">充值记录</div>
    </div>
    <div v-if="!isConfirm">
      <div class="newContent">
        <div class="contTop">
          <div class="contTitle">充值金额</div>
          <div class="contList">
            <div class="contItem" v-for="(it,index) in list" :key="index" :class="[currentIndex == index ? 'contItemActive':'']"
                 @click="changeIndex(index)"
            >
              {{it}}
            </div>
          </div>
        </div>
        <div class="contTop">
          <div class="contTitle">输入金额</div>
          <div class="inputWrap">
            <input type="number" placeholder="请输入金额" @focus="focusNum" v-model="inputValue">
            <div style="margin-top: 5px;color: red">*注：只能整数哦~小数点部分无效</div>
          </div>
        </div>
      </div>
      <div class="btnWrap">
        <div class="btn" @click="toSure">确定</div>
      </div>
    </div>
    <div v-else>
      <div class="newContent">
        <div class="confTitle">扫码支付</div>
        <div class="confCont">
          <div class="confTop">
            <div class="payWay">支付方式:[USDT(TRC20)]</div>
            <div class="tip">*请在30分钟内完成支付哦~</div>
          </div>
          <div class="confBot">
            <div class="confBotTitle">需支付USDT</div>
            <div class="confBotNum">{{confirmObj.money}}U</div>
            <div class="qrcode" ref="qrCodeUrl"></div>
            <div class="infoRight" v-clipboard="()=>detail.usdt_address" v-clipboard:success="copy">
              钱包地址{{detail.usdt_address || ''}}
              <img src="@/assets/img/copyIcon.png"  class="IRImg">
            </div>
            <div class="confBotTip">
              充值金额需与上方金额完全一致，方可到账成功 <span style="color: red">[注意小数点 尾数金额]</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue';
import Fetch from '../../utils/fetch'
import Clipboard from "v-clipboard";
import QRCode from 'qrcodejs2'
import {
  Icon,
  List,
  Empty,
  Popup
} from "vant";
Vue.use(Icon).use(Clipboard).use(List).use(Empty).use(Popup);
export default {
  name: "team",
  data() {
    return {
      detail:{},
      my_usdt_address:'',
      list:[500,1000,1500,2000,2500,3000],
      currentIndex:-1,
      inputValue:null,
      loading:false,
      isConfirm:false,
      confirmObj:{},
      timer:null
    };
  },
  created() {
    this.$parent.footer('user', false);
  },
  mounted() {
     this.getDeatil()
  },
  destroyed(){
    clearInterval(this.timer);
    this.timer = null
    console.log('destroyed')
  },
  methods:{
    focusNum(){
     this.currentIndex = -1
    },
    toSure(){
      if(this.loading){
        return
      }
      let money = 0
      if(this.currentIndex >= 0){
        money = this.list[this.currentIndex]
      }else {
        money = this.inputValue
      }
      if(!money){
        this.$toast('请选择金额');
        return;
      }
      this.loading = true
      Fetch('/recharge/recharge',{
        money
      }).then((r) => {
        this.confirmObj = r.data
        this.isConfirm = true
        this.loading = false
        this.startTimer(this.confirmObj.id)
        this.$nextTick(()=>{
          this.creatQrCode(this.detail.usdt_address)
        })
      }).catch(e =>{
        this.loading = false
      })
    },
    changeIndex(index){
      this.currentIndex = index
      this.inputValue = null
    },
    copy() {
      this.$toast(this.$t('recharge.copySuccess'));
    },
    creatQrCode(str) {
      var qrcode = new QRCode(this.$refs.qrCodeUrl, {
        text: str, // 需要转换为二维码的内容
        width: 200,
        height: 200,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCode.CorrectLevel.H
      })
    },
    getDeatil(){
      Fetch("/index/webconfig", "", false).then((r) => {
        if(r.code == 1){
          this.detail = r.data
        }
      });
    },
    startTimer(id){
      this.timer = setInterval(()=>{
        Fetch("/Recharge/recordDetail", {
          id
        }, false,false).then((r) => {
          if(r.code == 1 && r.data && r.data.status == 1){
            this.$toast('充值成功');
            clearInterval(this.timer);
            this.timer = null
            setTimeout(()=>{
              this.$router.go(-1)
            },1000)
          }
        });
      },5000)
    },
  },
};
</script>

<style lang="less" scoped>
   .basic_wrap{
     background-image: url(../../assets/img/otherBac.png);
     background-size: cover;
     background-position: center top;
     min-height: 100vh;
     width: 100vw;
     box-sizing: border-box;
     .newTitle{
       height: 50px;
       display: flex;
       align-items: center;
       padding: 0 16px;
       .backIcon{
         padding: 10px 10px 10px 0;
         flex: 1;
         text-align: left;
         img{
           width: 16px;
           height: 16px;
         }
       }
       .title{
         font-size: 16px;
         font-weight: bold;
         flex: 3;
         display: flex;
         justify-content: center;
       }
       .newRight{
          flex: 1;
          font-size: 14px;
         text-align: right;
       }
     }
     .newContent{
       margin: 23px 4.2vw 0;
        .contTop{
          margin-bottom: 16px;
          padding: 3.2vw;
          border-radius: 8px;
          background: #ffffff;
          .contTitle{
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 13px;
          }
          .contList{
            display: flex;
            flex-wrap: wrap;
            .contItem{
              width: 26vw;
              height: 36px;
              background: #EFF5FF;
              margin-bottom: 12px;
              display: flex;
              align-items: center;
              justify-content: center;
              overflow: hidden;
              border-radius: 8px;
              font-size: 16px;
            }
            .contItem:nth-child(3n + 2){
               margin: 0 3.6vw;
            }
            .contItemActive{
              border: 1px solid #0069FF;
              color: #0069FF;
            }
          }
          .inputWrap{
            input{
              width: 100%;
              height: 36px;
              background: #EFF5FF;
              border-radius: 8px;
              padding-left: 12px;
            }
          }
        }
     }
     .confTitle{
       font-size: 16px;
       font-weight: bold;
       margin-bottom: 12px;
     }
     .confCont{
       background: linear-gradient(90deg, #018DFF 0%, #0039FF 100%);
       border-radius: 8px;
       .confTop{
         padding: 17px 11px;
         .payWay{
           color: #DBECFE;
           font-size: 16px;
         }
         .tip{
           margin-top: 5px;
           color: #ffffff;
         }
       }
       .confBot{
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         background: #ffffff;
         border-radius: 8px;
         padding: 18px 0;
         .confBotTitle{
           font-size: 16px;
           font-weight: bold;
         }
         .confBotNum{
           font-size: 24px;
           font-weight: bold;
           color: #FF0000;
           margin: 12px 0;
         }
         .qrcode{
           padding: 10px;
           border: 1px solid #0069FF;
           border-radius: 8px;
         }
         .infoRight{
           display: flex;
           font-size: 14px;
           margin-top: 35px;
           border-bottom: 1px solid #E9E9E9;
           padding-bottom: 12px;
           margin-bottom: 12px;
           .IRImg{
             width: 16px;
             height: 16px;
             margin-left: 5px;
           }
         }
       }
     }
     .btnWrap{
       display: flex;
       justify-content: center;
       margin-top: 200px;
       .btn{
         width: 292px;
         height: 40px;
         background: linear-gradient(90deg, #018DFF 0%, #0039FF 100%);
         border-radius: 8px;
         color: #ffffff;
         display: flex;
         align-items: center;
         justify-content: center;
       }
     }
   }
</style>
